<script setup>

// 局部注册组件，直接导入
import { provide, ref } from 'vue';
import BaseVueFile2 from './components/BaseVueFile2.vue'
import BlogPage from './components/BlogPage.vue'
import PayMoney from './components/PayMoney.vue'
import { useRouter } from 'vue-router'
// 导入axios
import axios from 'axios'

// 初始化钱数
const money = ref(1000);
// 共享数据
provide("myMoney",money);
// 字体的初始大小
const x = ref(20);
// 捕获事件

function run1(){
  x.value += 1;
}

// 使用编程式路由导航
const router = useRouter();

// 使用网络请求
const axiosApp = axios.create({
  // 访问路径
  baseURL:"/",
  // 超时时间，单位是毫秒
  timeout:5000
});

const studentData = ref();
// 请求数据
// then是一个回调函数，res调用函数后，返回的数据
axiosApp.get("./student.json").then((res)=>{
  // 将请求回来的数据赋值给变量studentData
  studentData.value = res.data;
});

// 访问后台数据
// 使用网络请求
const axiosAppBack = axios.create({
  // 访问后台路径
  baseURL:"http://172.16.45.95:8086/",
  // 超时时间，单位是毫秒
  timeout:5000
});

const backData = ref();
// 请求数据
// then是一个回调函数，res调用函数后，返回的数据
axiosAppBack.get("/api/getUserList").then((res)=>{
  // 请求成功后，数据会放在res中
  // 将请求回来的数据赋值给变量backData
  backData.value = res.data;
});

</script>

<template>
  使用组件：<br>
  <!--
  <BaseVueFile></BaseVueFile>
  -->
  <!--调用组件时，可以使用小写，中间要用字符-连接-->
  <!--
  <base-vue-file></base-vue-file>
-->
  <hr>
  <br>

  <!--局部注册的组件，不用调用函数注册，import完成之后，直接使用-->
  <!--
  <BaseVueFile2></BaseVueFile2>
 -->

 组件传递数据：props
 <!--如果有多个props，中间使用空格隔开-->
 <br>
 <div :style="{fontSize:x+'px'}">
 <BlogPage title="中国足球冲出亚洲" blogContent="经过20年的努力，中国足球终于冲出了亚洲，走向了世界！" @big="run1">
父组件调用子组件，插槽的数据，就写在这里
 </BlogPage>
</div>

 <hr>
 数据跨组件传递：<br>
 总钱数：{{ money }}
<br>
<PayMoney></PayMoney>

<!--路由-->
<h1>路由</h1> <br>
<!--
  router-link:路由链接
  to: 相当于a标签的href，它的值和路由表中path的值对应
    
-->
<router-link to="/sport">体育新闻</router-link> <br>
<router-link to="/edu">教育新闻</router-link><br>
<router-link to="/jz">建筑学院</router-link> <br>

<!--编程式路由导航-->
<button @click="router.push('/edu')">教育新闻(编程式路由导航)</button> <br>
<!--路由嵌套时，访问路径要从父节点开始嵌套使用-->
<button @click="router.push('/gxy/xinxi')">信息学院(编程式路由导航)</button> <br>

<button @click="router.back()">后退(编程式路由导航)</button> <br>

<!--动态路由-->
<button @click="router.push('/sport/中国队夺得了世界杯冠军/足球又赢了的新闻')">体育新闻(动态路由)</button> <br>
<!--动态重定向-->
<button @click="router.push('/home')">主页(重定向)</button> <br>

<!--命名路由
    name:路由表中对应的name属性
    params:参数，参数要在path中使用:来定义，是一个对象，使用{}
-->
<button @click="router.push({name:'sport',params:{content:'体育新闻的内容',title:'命名路由传递的体育新闻标题'}})">体育新闻(命名路由)</button> <br>

<!--
  路由视图：显示组件的内容
-->
<router-view></router-view>

<br>

网络请求数据：<br>
学生信息：<br>
id:{{ studentData.id }} <br>
姓名:{{ studentData.username }} <br>
年龄:{{ studentData.age }} <br>
地址:{{ studentData.address }} <br>

<br>

请求后台数据：<br>
<li v-for="user in backData">
 id: {{ user.id }} <br>
 用户名：{{ user.username }} <br>
 年龄：{{ user.age }} <br>
 地址：{{ user.address }} <br>

</li>

</template>

<style scoped></style>